<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<script th:src="@{/js/views/waterpannel.js}"></script>

<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 水质数据分布
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>
<div class="container-div ui-layout-center">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>水质数据 - 水温(℃)</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-superpowers"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a onclick="init_water_tem()">水温</a>
                            </li>
                        </ul>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="water_tem"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 select-table table-striped">
                <div class="ibox float-e-margins">
                    <h5>水质信息 </h5>
                    <div class="ibox-content">
                        <table id="bootstrap-table" data-mobile-responsive="true"></table>
                    </div>
                </div>
            </div>
        </div>
</div>
<div th:include="include :: footer"></div>
<!--js-->
<script th:src="@{/js/plugins/simditor/module.js}"></script>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<!--echarts 可视化图形 插件-->
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts-gl.min.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    $(function() {
        $('body').layout({ west__size: 185 });
        select();
        queryAreaTree();
    });
    function select() {
        var options = {
            url: "/iot/waterpannel/view",
            search: false,
            showExport: true,
            columns: [{
                field : 'id',
                title : '水质数据id',
            },
                {
                    field : 'aid',
                    title : '地区id',
                },
                {
                    field : 'tem',
                    title : '水温',
                },
                {
                    field : 'ph',
                    title : '酸碱度值',
                },
                {
                    field : 'ndata',
                    title : '总氮含量',
                },
                {
                    field : 'pdata',
                    title : '总磷含量',
                },
                {
                    field : 'qdata',
                    title : '氰化物含量',
                },
                {
                    field : 'sdata',
                    title : '硫化物含量',
                },
                {
                    field : 'fudata',
                    title : '氟化物含量',
                },
                {
                    field : 'bacdata',
                    title : '大肠杆菌含量',
                },
                {
                    field : 'sampling_by',
                    title : '数据采集人员',
                },
                {
                    field : 'sampling_time',
                    title : '数据采集时间',
                },
                {
                    field : 'remark',
                    title : '是否有效',
                }]
        };
        $.table.init(options);
    };
    function queryAreaTree(){
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            aid1 = treeNode.id;
            $("#aid").val(treeNode.id);
            $.table.search();
        }
        $.tree.init(options);
    }
    $('#form-group11').on('change', function (e) {
        $("#form-group1").attr("name",$("#form-group11").val())
    });
    $('#form-group22').on('change', function (e) {
        $("#form-group2").attr("name",$("#form-group22").val())
    });
    $('#form-group33').on('select2:select', function (e) {
        $("#form-group3").attr("name",$("#form-group33").val())
    });
    $('#form-group44').on('change', function (e) {
        $("#form-group4").attr("value",$("#form-group44").val());
    });

</script>
</body>
</html>